<template>
    <div>
        <div v-if="isAuthorized">
            <!--分页导航栏-->
            <el-pagination
                    @current-change="handleCurrentChange"
                    background
                    layout="prev, pager, next"
                    :total=page.total>
            </el-pagination>

            <br>
            <!--<div>-->
                <!--<el-select :style="{width: typeSearchWidth}" @change="chooseSearchType"  v-model="value" placeholder="查找方式">-->
                    <!--<el-option-->
                            <!--v-for="item in options"-->
                            <!--:key="item.value"-->
                            <!--:label="item.label"-->
                            <!--:value="item.value">-->
                    <!--</el-option>-->
                <!--</el-select>-->

                <!--<el-input :style="{width: keywordSearchWidth}" placeholder="请输入书籍名称..." @input="searchBook" v-model="keyword" class="input-with-select">-->
                    <!--<el-button @click="searchBook"  slot="append" icon="el-icon-search"></el-button>-->
                <!--</el-input>-->
            <!--</div>-->

            <el-table  stripe border :data="users">
                <el-table-column  prop="username" label="用户名" width="100"></el-table-column>

                <el-table-column  prop="email" label="邮箱" width="160"></el-table-column>

                <el-table-column  prop="name" label="姓名" width="50"></el-table-column>

                <el-table-column  prop="deposit" label="存款" width="50"></el-table-column>

                <el-table-column  prop="phonenum" label="联系电话" width="120"></el-table-column>

                <el-table-column  prop="major" label="专业" width="50"></el-table-column>

                <el-table-column  prop="department" label="学院" width="160"></el-table-column>

                <el-table-column  prop="birth" show-overflow-tooltip label="生日" width="110"></el-table-column>

                <el-table-column  prop="borrownum" label="已借数目" width="50"></el-table-column>

                <el-table-column prop="" label="删除">
                    <template slot-scope="scope">
                        <el-button @click="deleteUserByUsername(scope.row)" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div id="container">
            <img v-if="!isAuthorized" :src="require('../../assets/img/404.gif')" height="300px"/>
        </div>

    </div>

</template>


<script>
    import main from "/src/main.js"
    export default {
        name: "AllUsers",
        data() {
            return {
                isAuthorized: true,
                partialSearch: false,
                keyword: '',
                timer: null,
                len: false,
                users: [],
                page: {
                    total: 0
                },
                queryParams: {
                    currentPageNum: 1
                },
                options: [{
                        value: 'bookname',
                        label: '书名'
                    },
                    {
                        value: 'author',
                        label: '作者名'
                    },
                ],
                value: 'bookname',
                typeSearchWidth: '80px',
                keywordSearchWidth:'200px'
            }
        },
        created() {
        },
        mounted() {
            //游客是无法访问的
            if(sessionStorage.getItem("username") === 'visitor'){
                this.isAuthorized = false;
                this.$message.error('您无权访问！');
                return;
            }

            let _this = this
            axios.get(main.requestAddress + '/role/getRole', {
                params: {'username': sessionStorage.getItem("username")}
            }).then(function (res) {
                //如果是普通用户 无法访问
                let role = res.data.data
                if(role === 1){
                    _this.isAuthorized = false;
                    _this.$message.error('您无权访问！');
                    return;
                }
                _this.showAll();
            }).catch(function (error) {
                _this.$message.error(error);
            });


        },
        methods: {
            handleCurrentChange(){
                this.queryParams.currentPageNum = currentPage;
                this.showAll();
            },
            chooseSearchType(){
                this.searchBook()
            },
            initializeTheListData(response, _data){
                _data.users = response.data.data.list
                _data.page.total = response.data.data.total
            },
            showAll() {
                const _data = this.$data
                const _this = this
                axios.get(main.requestAddress + '/admin/showAllUsers', {
                    params: {
                        'pn': _data.queryParams.currentPageNum
                    }
                }).then(function (response) {
                    _this.initializeTheListData(response, _data);
                }).catch(function (error) {
                    alert(error);
                });
            },
            deleteUserByUsername(row) {
                let username = row.username
                let _this = this
                axios.get(main.requestAddress + '/admin/deleteUserByUsername', {
                    params: {'username': username}
                }).then(function (response) {
                    let deleteNum = response.data.data
                    let message = '删除成功'
                    if(deleteNum === 0){
                        message = '删除错误，请重新操作'
                        _this.$message.error(message)
                    }else{
                        _this.$message.success(message)
                    }
                    _this.showAll()
                }).catch(function (error) {
                    alert(error);
                });
            }
        }
    }
</script>

<style scoped>
    el-table-column{
        background-color: red;
    }

    .el-select .el-input {
        width: 50px;
    }

    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
</style>